//指定任務

const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin')  ,  //html壓縮插件
    cleanCss = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer')//css加兼容前綴插件
    uglify  =  require('gulp-uglify')
    babel  = require('gulp-babel')    //由於無法壓縮es6的語法 所以要先轉成ES5
     del  = require('del')
     connect = require('gulp-connect')
     sass = require('gulp-sass')  

// gulp 指定任務用task方法  之前版本用這個
// gulp .task()  gulp3的用法


const delDist=()=>{
    return del(['dist'])
}


const paths={
    html:{
        src:'src/**/*.html',   //文件原始路徑
        dest:'dist'     //目標路徑
    },
    css:{
       src:('src/css/**/*.scss'),
       dest:('dist/css') 
    },
   js:{
       src:'src/js**/*.js',
       dest:'dist/js'
   },
   img:{
     src:'src/images/**/*',
     dest:'dist/images'
   },
   libs:{
       src:'src/libs/**/*',
       dest:'dist/libs'
   }
}



//指定html任務 把src裡的html文件取出來 壓縮 放在dist文件裡 
const html = () => {
    // **所有目錄 *所有文件
    return gulp.src(paths.html.src)
        //通過管道pipe進行壓縮
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS 
        }))
        // 放到終點位置
            .pipe(gulp.dest(paths.html.dest))
            .pipe(connect.reload())
}
// gulp壓縮需要returen出去



//指定css任務 壓縮 取出css文件 先把sass编译 加上兼容前綴 再壓縮 最後放在dist目錄裡
const css=()=>{
    return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(autoprefixer({
        overrideBrowserslist:['last 2 versions']
    }))
    .pipe(cleanCss())   
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}  

//壓縮js
const js=()=>{
    return gulp.src(paths.js.src)
       .pipe(babel({
        presets: ['@babel/env']   //要有這個環境 加上參數
        }))
      .pipe(uglify())
      .pipe(gulp.dest(paths.js.dest))
      .pipe(connect.reload())
}

//指定img任務 從src目錄裡拿到所有的圖片 移動dist裡就可以局了
 const img = ()=>{
    return gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest))
 }
 
//指定libs任務  直接移動到dist裡
const libs= ()=>{
    return gulp.src(paths.libs.src)
    .pipe(gulp.dest(paths.libs.dest))
 }
  

 //開啟服務器 自己指定一个端口号随意些 只要不是http协议的80 根目录是dist 支持热更新
 const server = ()=>{
     connect.server({
         port:1314,
         root:'dist',
         livereload:true
     })
 }

 
//添加一个监听 监听文件的修改 自动从新运行gulp
const watch=()=>{
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.css.src,css)
    gulp.watch(paths.js.src,js)
}



//指定的任務導出
// 只需要導出一個默認任務 這個隔默認任務裡包含了我們要執行的所有任務
//series是同步 執行完了才能執行後面的
//所以後面用parallel 他是異步 所以裡面的同時執行
module.exports.default= gulp.series(delDist,gulp.parallel(watch,server,html,css,js,img,libs))
    
